<template>
  <div class="main-layout">
    <el-container>
      <!-- 头部 -->
      <el-header class="header">
        <div class="header-left">
          <div class="hamburger" @click="toggleSidebar">
            <el-icon size="20"><Menu /></el-icon>
          </div>
          <h2 class="platform-title">快速开发平台</h2>
        </div>
        <div class="header-right">
          <el-dropdown @command="handleCommand">
            <span class="user-info">
              <el-avatar :size="32" :src="userInfo?.avatar || ''" />
              <span class="username hidden-xs">{{ userInfo?.nickname || userInfo?.username }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-container>
        <!-- 侧边栏导航 -->
        <el-aside 
          :width="sidebarCollapsed ? '64px' : '200px'" 
          class="sidebar"
          :class="{ 'sidebar-mobile': isMobile, 'sidebar-collapsed': sidebarCollapsed }"
        >
          <el-menu
            :default-active="activeMenu"
            class="sidebar-menu"
            router
            :collapse="sidebarCollapsed"
            unique-opened
            :collapse-transition="false"
          >
            <el-menu-item index="/dashboard">
              <el-icon><House /></el-icon>
              <template #title>仪表板</template>
            </el-menu-item>
            
            <!-- 动态菜单 -->
            <template v-for="menu in userMenus" :key="menu.id">
              <!-- 有子菜单的情况 -->
              <el-sub-menu 
                v-if="menu.children && menu.children.length > 0" 
                :index="menu.path"
              >
                <template #title>
                  <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
                  <span>{{ menu.name }}</span>
                </template>
                
                <el-menu-item 
                  v-for="child in menu.children" 
                  :key="child.id" 
                  :index="child.path"
                >
                  <el-icon v-if="child.icon"><component :is="child.icon" /></el-icon>
                  <template #title>{{ child.name }}</template>
                </el-menu-item>
              </el-sub-menu>
              
              <!-- 无子菜单的情况 -->
              <el-menu-item 
                v-else 
                :index="menu.path"
              >
                <el-icon v-if="menu.icon"><component :is="menu.icon" /></el-icon>
                <template #title>{{ menu.name }}</template>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>
        
        <!-- 主内容区 -->
        <el-main class="main-content content7" :class="{ 'main-content-collapsed': sidebarCollapsed }">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { 
  ArrowDown, 
  House, 
  User, 
  Setting, 
  Document,
  Menu as MenuIcon,
  Folder
} from "@element-plus/icons-vue"

// 注册图标组件
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

// 注册所有图标
const icons = {
  ...ElementPlusIconsVue,
  Folder, 
  Menu: MenuIcon, 
  Document, 
  Setting, 
  User, 
  House, 
  ArrowDown
}

const userInfo = computed(() => userStore.userInfo)
const userMenus = computed(() => userStore.userMenus || [])

// 响应式状态
const sidebarCollapsed = ref(false)
const isMobile = ref(false)

// 当前激活的菜单项
const activeMenu = computed(() => {
  return route.path
})

// 检测屏幕宽度
const checkScreenWidth = () => {
  const width = window.innerWidth
  isMobile.value = width <= 768
  if (isMobile.value) {
    sidebarCollapsed.value = true
  }
}

// 切换侧边栏
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

// 处理下拉菜单命令
const handleCommand = async (command: string) => {
  if (command === 'logout') {
    try {
      await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      
      await userStore.logoutAction()
      ElMessage.success('退出登录成功')
      router.push('/login')
    } catch (error) {
      // 用户取消操作
    }
  }
}



// 监听窗口大小变化
onMounted(() => {
  checkScreenWidth()
  window.addEventListener('resize', checkScreenWidth)
  
  // 获取用户信息
  if (!userInfo.value) {
    userStore.getUserInfoAction()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', checkScreenWidth)
})
</script>

<style lang="less" scoped>
@import '../styles/variables.less';

.main-layout {
  height: 100vh;
  overflow: hidden;
}

.header {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  
  .header-left {
    display: flex;
    align-items: center;
    
    .hamburger {
      display: none;
      cursor: pointer;
      margin-right: 15px;
      padding: 5px;
      border-radius: 4px;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
      }
    }
    
    .platform-title {
      margin: 0;
      color: @primary-color;
      font-size: 20px;
      font-weight: 600;
    }
  }
  
  .header-right {
    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 8px 12px;
      border-radius: 4px;
      transition: background-color 0.3s;
      
      &:hover {
        background-color: #f5f7fa;
      }
      
      .username {
        margin: 0 8px;
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

.sidebar {
  background-color: #fff;
  border-right: 1px solid #e4e7ed;
  transition: width 0.3s ease;
  
  .sidebar-menu {
    border-right: none;
    height: calc(100vh - 60px);
    
    .el-menu-item {
      &:hover {
        background-color: #ecf5ff;
        color: @primary-color;
      }
      
      &.is-active {
        background-color: #ecf5ff;
        color: @primary-color;
        border-right: 3px solid @primary-color;
      }
    }
  }
  
  &.sidebar-mobile {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1000;
    height: calc(100vh - 60px);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }
}

.main-content {
  background-color: #f5f7fa;
  padding: 20px;
  overflow-y: auto;
  height: calc(100vh - 60px);
  transition: margin-left 0.3s ease;
  
  &.main-content-collapsed {
    margin-left: 0;
  }
  
  &.content7 {
    min-height: calc(100vh - 60px);
  }
}

// 响应式样式
@media (max-width: 1200px) {
  .main-content {
    padding: 15px;
  }
}

@media (max-width: 992px) {
  .header {
    .header-left {
      .hamburger {
        display: block;
      }
    }
  }
  
  .main-content {
    padding: 15px 10px;
  }
}

@media (max-width: 768px) {
  .header {
    padding: 0 15px;
    
    .header-left {
      .platform-title {
        font-size: 16px;
      }
    }
    
    .header-right {
      .user-info {
        .username {
          display: none;
        }
      }
    }
  }
  
  .sidebar {
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 1000;
    height: calc(100vh - 60px);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    
    &.sidebar-collapsed {
      transform: translateX(-100%);
    }
  }
  
  .main-content {
    padding: 10px;
    margin-left: 0;
  }
  
  .hidden-xs {
    display: none;
  }
}

@media (max-width: 576px) {
  .header {
    padding: 0 10px;
    
    .header-left {
      .platform-title {
        font-size: 14px;
      }
    }
  }
  
  .main-content {
    padding: 5px;
  }
}

// 1080P 优化
@media (min-width: 1920px) {
  .main-content {
    padding: 30px;
  }
  
  .dashboard-content {
    max-width: 1400px;
    margin: 0 auto;
  }
}
</style>